<template>
  <div class="promise" style="width: 90%;margin: auto">
    <div style=" line-height: 50px; font-size: 30px; color: dodgerblue; margin-top: 20px;">填报声明</div>
    <div><el-steps :active="0" finish-status="success" simple style="margin-top: 20px">
      <el-step class="a" title="填报声明" style="flex-basis: 16%" />
      <el-step class="b" title="中小企业数智生态诊断" style="flex-basis: 34%" />
      <el-step title="完成" />
    </el-steps></div>
    <div style="background: #eeeeee;padding: 20px;margin-top: 30px">
      <div style="width: 74%;margin: auto;background: #ffffff;padding: 20px;">
        <el-form
          ref="promiseForm"
          :model="promiseForm"
          :rules="rules"
          label-width="400px"
        >
          <div class="title2">填报声明</div>
          <el-form-item label="在中华人民共和国境内工商注册登记、具有独立法人资格" prop="independentLegal">
            <el-radio-group v-model="promiseForm.independentLegal">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="asx">申请单位在中华人民共和国境内工商注册登记、具有独立法人资格</div>
          <el-form-item label="符合《中小企业划型标准规定》" prop="typeStandard">
            <el-radio-group v-model="promiseForm.typeStandard">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="asx">中小企业规模类型自测：<a href="https://baosong.miit.gov.cn/ScaleTest" target="_blank">自测小程序</a></div>
          <el-form-item label="未被列入经营异常名录或严重失信主体名单" prop="noAbnormal">
            <el-radio-group v-model="promiseForm.noAbnormal">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="asx">严重负面事项查询：<a href="https://www.creditchina.gov.cn/" target="_blank">信用中国</a><br>
            查询经营异常名录：<a href="https://www.gsxt.gov.cn" target="_blank">国家企业信用信息公示系统</a></div>
          <el-form-item label="提供的产品（服务）不属于国家禁止、限制或淘汰类" prop="nationalProhibition">
            <el-radio-group v-model="promiseForm.nationalProhibition">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="asx">禁止、限制或淘汰类产品查询：<a href="https://zfxxgk.ndrc.gov.cn/web/iteminfo.jsp?id=18453" target="_blank">产业结构调整指导目录（2019年本)</a></div>
          <el-form-item label="近三年未发生重大安全（含网络安全、数据安全）、质量、环境污染等事故以及偷漏税等违法违规行为" prop="noSecurity">
            <el-radio-group v-model="promiseForm.noSecurity">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="asx">“重大安全（含网络安全、数据安全）、质量、环境污染等事故”是指产品安全、生产安全、工程质量安全、环境保护、网络安全等各级监管部门，依据《中华人民共和国安全生产法》《中华人民共和国环境保护法》《生产安全事故报告和调查处理条例》《中华人民共和国网络安全法》《中华人民共和国数据安全法》等法律法规，最高人民法院、最高人民检察院司法解释，部门规章以及地方法规等出具的判定意见。</div>
          <el-form-item class="shangxia">
            <el-button type="primary" :disabled="!accept" @click="submitForm('promiseForm')">下一步</el-button>
            <el-button type="primary" @click="resetForm('promiseForm')">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { promiseUpdate, promiseFind } from '@/api/diagnosis'
export default {
  name: 'WorkstationInfo',
  components: {
  },
  data() {
    return {
      loading: false,
      accept: false,
      promiseForm: {
        independentLegal: '',
        typeStandard: '',
        noAbnormal: '',
        nationalProhibition: '',
        noSecurity: ''
      },
      rules: {
        independentLegal: [
          { required: true, message: '请选择必选项', trigger: 'blur' }
        ],
        typeStandard: [
          { required: true, message: '请选择必选项', trigger: 'change' }
        ],
        noAbnormal: [
          { required: true, message: '请选择必选项', trigger: 'blur' }
        ],
        nationalProhibition: [
          { required: true, message: '请选择必选项', trigger: 'blur' }

        ],
        noSecurity: [
          { required: true, message: '请选择必选项', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    promiseForm: {
      handler(newVal) {
        if (newVal.typeStandard === '1' && newVal.nationalProhibition === '1' && newVal.independentLegal === '1' && newVal.noSecurity === '1' && newVal.noAbnormal === '1') {
          // eslint-disable-next-line no-mixed-spaces-and-tabs
          this.accept = true
        } else {
          // eslint-disable-next-line no-mixed-spaces-and-tabs
          this.accept = false
        }
      },
      deep: true
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          promiseUpdate(this.promiseForm).then(response => {
            if (response.result === 0) {
              this.$message({
                message: response.msg, type: 'error'
              })
            }
            if (response.result === 1) {
              this.$router.push('/diagnosis/comprehensive')
            }
          })
        }
      })
    },
    resetForm(form) {
      this.$refs.promiseForm.resetFields()
    },
    getDate() {
      promiseFind().then(response => {
        if (response.result === 1) {
          if (response.data.independentLegal === '1' &&
            response.data.nationalProhibition === '1' &&
            response.data.noAbnormal === '1' &&
            response.data.noSecurity === '1' &&
            response.data.typeStandard === '1') {
            this.$router.push('/diagnosis/comprehensive')
          }
        }
      })
    }

  }
}
</script>
<style>
.workstation h3{
  margin-top: 40px;
}
.workstation .el-textarea__inner {
  height: 400px !important;
}

.workstation .el-date-editor.el-input {
  width: 100% !important;
}

.workstation .el-select {
  width: 100% !important;
}

.workstation .el-dialog--center .el-dialog__body {
  height: 440px !important;
  overflow: auto !important;
}

.workstation .el-dialog {
  margin-top: 1vh !important;
}

.workstation .el-dialog__header {
  background: #154271;
}

.workstation .el-dialog__header .el-dialog__title {
  color: #ffffff;
}

.workstation .el-dialog__close {
  color: #ffffff !important;
}

.workstation .checkbottom .el-checkbox__input {
  margin-top: -38px !important;
}
</style>
<style scoped>
.asx {
  font-size: 14px;
  line-height: 30px;
  margin-top: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 25px;
  color: #409eff;
}
.asx a{
  color: #1f5eff;
}
.title2 {
  line-height: 40px;
  font-size: 20px;
  color: darkgray;
  border-bottom: 1px #cccccc solid;
  margin-bottom: 20px;
}
</style>
<style>
.promise .el-form-item__label{
  text-align: left !important;
}
.promise .el-form-item {
  margin-bottom: 0 !important;
}
.promise  .bottomButtom .el-form-item__content{
  margin-left: 300px !important;
}
.shangxia .el-form-item__content{
  margin: auto !important;
  width: 370px;
  text-align: center;
}
.promise .el-step.is-simple:not(:last-of-type) .el-step__title {
  max-width: 85%;
  word-break: break-all;
}
.a{flex-basis: 16% !important }
.b{flex-basis: 30% !important }
</style>
